<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <!-- <div class="filter-container">
      <el-button v-permission="['GET /admin/purchase/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div> -->

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" label="采购计划" prop="name" />
      <el-table-column align="center" label="发布版本" prop="parent_id">
      <template slot-scope="scope">
          {{ scope.row.parentId==null?'第一次发布':'第二次发布' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="采购需求" prop="needHerb">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.needHerb" placement="top-start">
            <span>{{ellipsis(scope.row.needHerb)}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="截止时间" prop="dueTime" />
      <el-table-column align="center" label="联系人" prop="contactName" />
      <el-table-column align="center" label="电话" prop="contactTel" />
      <el-table-column align="center" label="发布时间" prop="addTime" />
      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleView(scope.row)">报价详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<style>

</style>

<script>
import { fetchList } from '@/api/purchaseManage'
import { uploadPath } from '@/api/storage'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { thumbnail, toPreview } from '@/utils/index'

export default {
  name: 'purchaseManage',
  components: { Pagination },
  data() {
    return {
      thumbnail,
      toPreview,
      uploadPath,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        remark:'',
        status:'2',
        id: undefined,
        name: undefined,
        sort: 'add_time',
        order: 'desc'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.listLoading = false
        })
    },
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0,20) + '...'
      }
      return value
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleView(row){
      this.$router.push({ path: '/mall/noQuotation', query: { id: row.id }})
      // this.$router.push({ path: '/goods/edit', query: { id: row.id }})
    }
  }
}
</script>
